<template>
  <div class="app-container documentation-container">
    <div class="top">
      <div class="add_zhandian">
        <el-button type="primary" icon="el-icon-plus" @click.native="addsite">新增轮播图</el-button>
      </div>

    </div>
    <el-table
      v-loading="loading"
      :data="fileList"
      border
      style="width: 100%;margin-top:30px;"
    >
      <el-table-column align="image" label="轮播图" width="320">
        <template slot-scope="scope">
          <img :src="scope.row.url" class="image_" alt="">
        </template>
      </el-table-column>

      <el-table-column align="center" label="操作" width="200">
        <template slot-scope="scope">
          <el-button type="success" size="small" @click="handleEdit(scope)">编辑查看</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      title="提示"
      :visible.sync="deletegoodsflag"
      width="30%"
    >
      <el-form :label-position="labelPosition" label-width="100px">
        <el-form-item label="轮播图片">
          <el-upload
            class="upload-demo"
            action=""
            :before-upload="beforeUpload"
            :before-remove="handleRemove"
            name="image"
            :file-list="fileList"
            list-type="picture"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2M</div>
          </el-upload>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      labelPosition: 'right',
      fileList: [],
      contenttype: '1', // 该条内容状态
      goodsindex: 0,
      // 企业商品
      ViewGoodsflag: false,
      GoodsData: [],
      deletegoodsflag: false,
      goodsindex: 0,
      goodsrows: [],
      // status 1 为冻结
      // 2 冻结
      // 3超级管理源冻结

      holder: '请输入内容',
      loading: true, //
      pagesize: 2, // 每页条数
      total: 0, // 总条目数
      content: '',
      tableData: [],
      options: [{
        value: 'title',
        label: '公告标题'
      }, {
        value: 'author',
        label: '作者'
      }, {
        value: 'all',
        label: '全部'
      }],
      value: ''
    }
  },
  computed: {
    // 计算属性
  },
  watch: {

  },
  created() {
    this.GET_IMG()
  },
  mounted() {
    // 生命周期

  },
  methods: {
    handleRemove(file, fileList) { // 证书删除
      if (file && file.status === 'success') {
        this.$imgFn.seend({ 'pathimg': fileList[0].url.slice(28) }).deleteimg(
          (ref) => {
            if (ref.status == 200) {
              if (ref.data.code == 200) {
                this.$notify({
                  title: ref.data.Massage,
                  type: 'success'
                })
                this.fileList = fileList
              }
            }
          }, (res) => {
          })
      }

      // deleteimg
    },
    beforeUpload(file) { // 证书图片上传
      if (this.$oneselfFn.IMAGEVAL(file)) {
        this.$imgFn.seend({
          'path': this.$ENV.TRACING + this.$ENV.CAROUSEL,
          file
        }).addimg(
          (ref) => {
            if (ref.status == 200) {
              this.fileList.push({
                name: file.name,
                url: ref.data.imageURL + '/' + ref.data.imagePath
              })
            }
          }, (res) => {
          })
      } else {
        this.$notify({
          title: '警告',
          message: '图片大小不能超过2M',
          type: 'warning'
        })
      }
      return false
    },
    addsite() {
      this.deletegoodsflag = true
    },

    handleEdit(val) { // 编辑 查看详情

    },

    GET_IMG() { // 获取所有图片
      this.$imgFn.seend({ 'path': this.$ENV.TRACING + this.$ENV.CAROUSEL }).select(
        (ref) => {
          if (ref.status == 200) {
            if (ref.data != {}) {
              ref.data.forEach((item, key) => {
                this.fileList.push({
                  'name': key + 1,
                  'url': this.$ENV.UPLOADIMG + item
                })
              })
              this.loading = false
            }
          }
        }, (res) => {
          // console.log(res)
        }
      )
    }
  }
}
</script>
<style scoped>
  .image_{
    width:200px;
    height:180px;
    background-size: 100% 100%;
  }
  .app-container {

  .roles-table {
    margin-top: 30px;
  }

  .permission-tree {
    margin-bottom: 30px;
  }

  }
  /*手机*/
  @media screen and (min-width: 100px) and (max-width: 960px) {
    .top {
      width: 100%;
      height: 147px;

    }

    .add_zhandian {
      width: 100%;
      height: 54px;
    }

    .selech {
      width: 100%;
      height: 50px;
    }
  }

  /*PC*/
  @media screen and (min-width: 960px) and (max-width: 1900px) {
    .top {
      width: 100%;
      height: 50px;
    }

    .add_zhandian {
      width: 20%;
      height: 100%;
      float: left;
    }

    .selech {
      width: 79%;
      height: 100%;
      float: right;

    }
  }
</style>
